<template>
  <el-row>
    <el-col>
      <el-col :span="6" :offset="9">
        <div class="login-form">
          <h1>扫码开闸管理系统</h1>
          <el-form
            :model="login_form"
            :rules="rules"
            ref="login_form"
            label-width="80px"
          >
            <el-form-item label="登录名" prop="username">
              <el-input
                type="text"
                v-model="login_form.username"
                placeholder="请输入登录名"
                @keyup.enter.native="login"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="login_form.password"
                placeholder="请输入密码"
                @keyup.enter.native="login"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login" v-prevent-re-click>
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import WxGateUser from "@/api/WxGateUser";
import aes from "@/tool/AES";
import strKit from "@/tool/StrKit";
export default {
  components: {},
  props: {},
  data() {
    return {
      api: null,
      login_form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名" }
        ],
        password: [{ required: true, trigger: "blur", message: "请选择密码" }]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.api = new WxGateUser();
  },
  mounted() {},
  methods: {
    login() {
      this.$refs["login_form"].validate(valid => {
        if (valid) {
          let salt = strKit.generateMixed(8);
          //加密
          let params = {
            username: aes.encrypt(this.login_form.username),
            password: aes.encrypt(this.login_form.password + salt),
            salt: salt
          };
          this.api.login(params, res => {
            if (res.code === 0) {
              this.$message.success("登陆成功");
              this.$router.push("/");
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-form {
  margin-top: 30%;
  padding: 10px 50px;
  border: 1px solid #909399;
  border-radius: 5px;

  h1 {
    text-align: center;
  }
}
</style>
